<!-- 商城电子合同2.0 -->
<template>
  <div id="shopSignIndexV2">
    <c-title :hide="false" text="合同签署"> </c-title>
    <van-cell-group inset style="margin: 10px;" v-if="this.$route.params.scene =='1'">
      <van-cell title="订单号：" :value="esignData.order_info && esignData.order_info.order_sn" />
      <van-cell title="订单金额：" :value="`${esignData.order_info && esignData.order_info.price} 元`" />
      <!-- <van-cell title="收货人姓名：" :value="esignData.order_address && esignData.order_address.realname" />
      <van-cell title="收货人手机号：" :value="esignData.order_address && esignData.order_address.mobile" />
      <van-cell title="收货人地址：" :value="esignData.order_address && esignData.order_address.address" /> -->
    </van-cell-group>

    <div class="cell-group">
      <div class="cell-group-title">认证信息</div>
      <div class="cell-group-desc">根据平台要求，您需要完成以下合同签署后再{{this.$route.params.scene == 1?'支付订单':'进行下一步'}}！ 请先完成认证！</div>
      <div class="color-black-list flex-a-c" @click="toDecertification(esignData.person_status,'showPersonBank')">
        <div class="color-black" :class="{'unverified-color': !esignData.person_status}">1、个人认证（{{esignData.person_name?esignData.person_name:'去认证'}}）</div>
        <i class="iconfont icon-submit" v-if="esignData.person_status"></i>
        <i class="iconfont icon-fontclass-gengxin" style="margin-left: 5px; color: #f51d1d;" v-else @click="getPersonData"></i>
      </div>
      <div class="color-black-list flex-a-c" v-show="hasCompany" @click="toDecertification(esignData.company_status,'showCompany')">
        <div class="color-black" :class="{'unverified-color': !esignData.company_status}">2、企业认证（{{esignData.company_status?esignData.company_name:'去认证'}}）</div>
        <i class="iconfont icon-submit" v-if="esignData.company_status"></i>
      </div>
      <div @click="toDecertification(0,'changeCompany')" class="cell-group-desc" style="color: #18b494; margin: 0 0 8px 0;" v-if="hasCompany&&esignData.company_list && esignData.company_list.length > 0">切换企业</div>
      <div class="cell-group-desc" style="color: #f51d1d; margin: 0;" v-if="hasCompany">当前合同要求企业身份签署，请确认您为企业法人，否则将无法进行 企业认证！</div>
    </div>

    <div class="cell-group">
      <div class="cell-group-title">合同信息</div>
      <div class="contract-item flex-a-c" v-for="(item,index) in esignData.scene_list" :key="item.id">
        <div class="contract-item-left">
          <div class="s-13">合同{{index +1}}：</div>
          <div class="s-15" style="padding: 8px 0; font-weight: bold;">《{{item.name}}》</div>
          <div class="s-11">{{item.sign_type ==1?'企业签署':'个人签署'}} {{item.sign_role_name}}</div>
        </div>
        <div class="contract-item-right">
          <van-button type="danger" block size="small" v-if="!item.signed" @click="toSign(item)">去签署</van-button>
          <van-button type="primary" disabled block size="small" color="#18b494" v-else>已签署</van-button>
        </div>
      </div>
    </div>
    <div style="height: 4rem; width: 100%;"></div>
    <div class="bottom-btn set-pc-style" style=""><van-button type="danger" block @click="confirmSign">{{this.$route.params.scene == 1?'立即支付':'下一步'}}</van-button></div>

    <personBank v-model="showPersonBank" :hasCompany="hasCompany" :real_name_auth_set="esignData.plugin_set"><!-- 个人认证 --></personBank>
    <company v-model="showCompany" :extinfo="{person_name: esignData.person_name,is_new: is_new_add_com,person_id_no: esignData.person_id_no}" :cid='cid' @changeCid="changeCid"><!-- 企业认证 --></company>
    <companyList v-model="changeCompany" :list='esignData.company_list' @changeCid="changeCid" @addCompany="addCompany"><!-- 切换企业 --></companyList>
    <signControl v-model="showControl" :datas="controlInfo" :cid='cid'></signControl>
  </div>
</template>

<script>
import personBank from "./component/person_bank.vue";
import company from "./component/company.vue";
import companyList from "./component/companyList.vue";
import signControl from "./component/signControl.vue";

export default {
  data() {
    return {
      esignData: {},
      showPersonBank: false,
      showCompany: false,
      showControl: false,//完善合同，填写控件信息弹窗
      changeCompany: false,
      is_new_add_com: false,//是否为新增企业

      controlInfo: {},
      hasCompany: false,//合同列表是否有企业需要认证
      hasSigning: false,//合同列表是否有未签署的合同
      cid: 0
    };
  },
  components: {personBank,company,companyList,signControl},
  computed: {},
  activated() {
    this.init();
    this.getPersonData();
  },
  methods: {
    init(){
      this.hasCompany = false;
      this.hasSigning = false;
      this.is_new_add_com = false;
    },
    getData(){
      let json = {
        scene_type: this.$route.params.scene ,
        cid: this.cid,
        order_id: this.$route.params.order_id||0
      };
      if(this.$route.query.scene_id) {
        json.scene_id = this.$route.query.scene_id;
      }
      $http
        .get("plugin.shop-esign-v2.frontend.controllers.index.index", json,".")
        .then(response => {
          if (response.result === 1) {
            this.esignData = response.data;
            let cid = response.data.cid||0;
            this.forSceneList(response.data.scene_list,cid);
            this.checkLoaing = true;
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getPersonData() {
      this.checkLoaing = false;//查询状态
      $http.get("plugin.yun-sign.frontend.h5.person.check-person-approve", {},'加载中').then(response => {
        this.getData();
      });
    },
    toDecertification(_status,_val){
      if(!this.checkLoaing) return this.$toast('请稍后...');
      if(_val == 'showCompany' && this.esignData.person_status == 0) {
        return this.$dialog.alert({message:'请先完成个人认证'});
      }
      if(!_status) this[_val] = true;
    },
    changeCid(data){
      if(data.cid){
        this.cid = data.cid;
        this.is_new_add_com = false;
      }
      this.getData();
    },
    addCompany(){
      this.is_new_add_com = true;
      this.showCompany = true;
    },
    forSceneList(list,cid){
      list.forEach(item => {
        if(item.sign_type == 1) this.hasCompany = true;//有企业签署，需要显示企业认证
        if(!item.signed) this.hasSigning = true;//有合同还没完成签署
      });
      if(this.hasCompany) {
        this.cid = cid;
      }
    },
    toSign(data) {
      // if(!this.esignData.person_status){
      //   this.$dialog.alert({message:'请先完成个人认证'});
      //   return;
      // }
      if(this.hasCompany && !this.esignData.company_status){
        this.$dialog.alert({message:'请先完成企业认证'});
        return;
      }
      this.controlInfo = data;
      this.showControl = true;
    },
    confirmSign(){
      if(!this.esignData.person_status){
        this.$dialog.alert({message:'请先完成个人认证'});
        return;
      }
      if(this.hasCompany && !this.esignData.company_status){
        this.$dialog.alert({message:'请先完成企业认证'});
        return;
      }
      if(this.hasSigning) {
        this.$dialog.alert({message:'请完成合同签署'});
        return;
      }
      if(this.$route.params.scene == 5) {
        if (window.isMiniprogram) {
          return wx.miniProgram.redirectTo({
            url:`/mircoApp/tx-team-performance/apply/apply`
          });
        }
        return this.$router.replace(this.fun.getUrl("txTeamPerformanceApply",{}));//团队业绩统计申请
      }
      if(this.$route.params.scene == 3) {
        if (window.isMiniprogram) {
          return wx.miniProgram.redirectTo({
            url:'/packageB/member/love/love_transfer/love_transfer'
          });
        }
        return this.$router.replace(this.fun.getUrl("love_transfer",{}));//爱心值转账
      }
      if(this.$route.params.scene == 2) {
        if (window.isMiniprogram) {
          return wx.miniProgram.redirectTo({
            url:'/packageA/member/withdrawal/withdrawal'
          });
        }
        return this.$router.replace(this.fun.getUrl("withdrawal",{}));//提现
      }
      if(this.$route.params.scene == 4) {
        if (window.isMiniprogram) {
          return wx.miniProgram.redirectTo({
            url:'/packageB/member/Integral_love/Integral_love'
          });
        }
        return this.$router.replace(this.fun.getUrl("Integral_love",{}));//消费积分
      }
      if(this.$route.params.scene == 1) {
        if (window.isMiniprogram) {
          return wx.miniProgram.redirectTo({
            url:`/packageD/buy/orderPay/orderPay?order_id=${this.$route.params.order_id}&status=2`
          });
        }
        return this.$router.replace(this.fun.getUrl("orderpay",{order_ids: this.$route.params.order_id}));//支付订单
      }
      if(this.$route.params.scene == 7) {
        if (window.isMiniprogram) {
          return wx.miniProgram.redirectTo({
            url:`/packageA/member/balance/balance_recharge/balance_recharge`
          });
        }
        return this.$router.replace(this.fun.getUrl("balance_recharge",{}));//余额充值
      }
      if(this.$route.params.scene == 8) {
        if (window.isMiniprogram) {
          return wx.miniProgram.redirectTo({
            url:`/packageA/member/storeApply/storeApply`
          });
        }
        return this.$router.replace(this.fun.getUrl("storeApply",{}));//门店申请
      }
    },
  }
};
</script>
<style lang="scss" scoped>
#shopSignIndexV2 {
  .van-cell__title {
    text-align: left;
  }

  .cell-group {
    overflow: hidden;
    border-radius: 8px;
    background-color: #fff;
    margin: 10px;
    text-align: left;
    padding: 12px;

    .cell-group-title {
      line-height: 1rem;
      border-left: 3px solid #f51d1d;
      text-indent: 0.375rem;
      color: #181818;
      margin-bottom: 10px;
    }

    .cell-group-desc {
      line-height: 1rem;
      font-size: 12px;
      color: #494949;
      margin-bottom: 1.25rem;
    }

    .color-black-list {
      margin-bottom: 1rem;

      .icon-submit {
        font-size: 24px;
        color: #18b494;
      }
    }

    .color-black {
      width: 17.5rem;
      height: 2.25rem;
      line-height: 2.25rem;
      padding: 0 0.75rem;
      background: #18b494;
      border-radius: 5px;
      font-size: 13px;
      color: #fff;
    }
  }

  .s-11 {
    font-size: 0.6875rem;
  }

  .s-13 {
    font-size: 0.8125rem;
  }

  .s-15 {
    font-size: 0.9375rem;
    color: #1d1d1d;
  }

  .contract-item {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #ededed;

    .contract-item-left {
      flex: 1;
    }
  }

  .contract-item:last-child {
    margin: 0;
    border: none;
  }

  .bottom-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem 1.75rem;
    background: #fff;
  }

  .unverified-color {
    background: #f51d1d !important;
  }
}
</style>
